<template>
	<view>
		<view class="footer_box" :class="{ footer_bg: bg }">
			<view v-for="(item, index) of navigationList" :key="index" class="footer_item"
				:class="[item.pagePath == path ? 'footer_item_active ' : '']">
				<view class="footer_nav_item" @click="onPageJump(item.pagePath)">
					<!-- <image v-if="item.pagePath == path" class="footer_nav_item_image" :src="'/' + item.selectedIconPath" mode="aspectFit"></image>
					<image v-else class="footer_nav_item_image" :src="'/' + item.iconPath" mode="aspectFit"></image> -->
					<text class="footer_nav_item_text"
						:class="[item.pagePath == path ? 'footer_item_text_active ' : '']">{{ item.text }}
					</text>
					<view class="badge" :style="{top:item.pagePath == path?'20%':'25%',left:item.pagePath == path?'65%':'60%'}">
						<u-badge v-if="index==1" bgColor="#F8635D" max="99" :value="badgeValue" offset='[10,20]'>
						</u-badge>
					</view>
					<view :class="[item.pagePath == path ? 'footer_after ' : '']"></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			bg: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				path: '',
				navigationList: [{
						pagePath: 'pages/home/home',
						iconPath: 'static/icon/tab/icon_home.png',
						selectedIconPath: 'static/icon/tab/icon_home_c.png',
						text: '首页'
					},
					{
						pagePath: 'pages/shopCar/shopCar',
						iconPath: 'static/icon/tab/icon_wode.png',
						selectedIconPath: 'static/icon/tab/icon_wode_c.png',
						text: '购物车'
					},
					{
						pagePath: 'pages/userHome/userHome',
						iconPath: 'static/icon/tab/icon_xiaoxi.png',
						selectedIconPath: 'static/icon/tab/icon_xiaoxi_c.png',
						text: '个人中心'
					}
				],
				popupShow: false,
				badgeValue: null
			};
		},
		//第一次加载
		created() {
			//获取所有页面
			let currentPages = getCurrentPages();
			let page = currentPages[currentPages.length - 1];
			this.path = page.route;
			uni.$on('cartCount', (res) => {
				this.badgeValue = res
			})
			uni.$emit('need');
		},
		onShow() {
			
		},
		//方法
		methods: {
			onPageJump(url) {
				if (this.path !== url) {
					uni.switchTab({
						url: '/' + url
					});
				}
			},
			onRaised() {
				this.popupShow = true;
			}
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.footer_station {
		height: 100rpx;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer_box {
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		z-index: 502;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.footer_bg {
		background-color: #FFF;
	}

	.footer_item {
		position: relative;
		flex: 1;
		border-top: 1px solid #e1e1e1;
		border-right: 1px solid #e1e1e1;
	}

	.footer_nav_item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.footer_nav_item:active {
		background-color: rgba($color: #fff, $alpha: 0.1);
	}

	.footer_nav_item_text {
		font-size: 24rpx;
		color: #999999;
		margin-top: 6rpx;
	}

	.footer_nav_item_text_active {
		color: #f9a633;
	}

	.footer_nav_item_image {
		width: 50rpx;
		height: 50rpx;
	}

	.footer_raised_item {
		position: absolute;
		top: -40rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 120rpx;
		background-color: #FFF;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.footer_raised_item_image {
		width: 70rpx;
		height: 70rpx;
	}

	.popup_content {
		background-color: #FFF;
		padding: 30rpx;
	}

	.footer_item_text_active {
		font-weight: 600;
		color: #333333;
		font-size: 34rpx;
		position: relative;
		z-index: 10;
	}

	.footer_after {
		width: 80rpx;
		height: 12rpx;
		background: #EA9695;
		border-radius: 6rpx;
		position: absolute;
		top: 60rpx;
		z-index: 1;
	}

	.footer_item_active {
		border-top: none;
	}

	.badge {
		position: absolute;
		left: 60%;
		top: 25%;
		z-index: 999
	}
</style>
